<template>
	<view class="main">
		<view class="box">
			<view class="input_box">
				<view class="label">联系人</view>
				<view class="input">
					<input type="text" v-model="info.consignee" placeholder="请填写联系人姓名" />
				</view>
			</view>
			<view class="input_box">
				<view class="label">手机号</view>
				<view class="input">
					<input type="text" v-model="info.mobile" placeholder="请填写手机号" />
				</view>
			</view>
			<view class="input_box">
				<view class="label">所在地区</view>
				<AddressPicker style="width: 80%;" @change="change" :level="3">{{planLocate}} </AddressPicker>
				
			</view>
			<view class="input_box input_box2">
				<view class="label">详细地址</view>
				<view class="input">
					<textarea class="textarea2" v-model="info.address" placeholder="街道丶楼牌号" />
				</view>
			</view>
		</view>
		<view class="box3">
			<view>设置默认地址</view>
			<view class="">	
				<switch :checked="info.isDefault" @change="switch1Change" style="transform:scale(0.7)" color="#FC7A06" />
			</view> 
		</view>
		<view style="display: flex;width: 25%;color: white; height: 60rpx;border-style: outset; background-color: blue;justify-content: center;align-items: center;box-shadow: 1px 1px 5px #ffffff;margin: 20rpx auto 0 auto;" @click="addresssave">
			保 存
		</view>
		<!-- <u-button type="primary" :ripple="true"  shape="circle" :custom-style="customStyle" :plain="false" @click="addresssave">保 存</u-button> -->
		<!--调用地址组件 -->
		
		<!-- <u-select title="区域" v-model="show" mode="mutil-column-auto" :list="selectorObj" label-name="title" value-name="id" child-name="children" @confirm="confirm" :default-value="defaultvalue"></u-select> -->
	</view>
</template>

<script>
	import AddressPicker from "@/components/AddressPicker/AddressPicker.vue" 
	export default {
		components:{
			AddressPicker
			},
		data() {
			return {
				planLocate:'请选择地址',
				// customStyle: {
				// 	background: '#FC7A06',
				// 	margin:'50rpx 20rpx',
				// 	fontSize:'14px'
				// },
				info:{
				  "id":"",
				  "address": "",
				  "city": "",
				  "cityId": 0,
				  "consignee": "",
				  "district": "",
				  "districtId": 0,
				  "isDefault": false,
				  "mobile": "",
				  "province": "",
				  "provinceId": 0,
				}, 
				address:'',
				show:false,
				selectorObj: [],
				defaultvalue:[0,0,0],
			}
		},
		// 点修改地址传回的是带ID参数的网址
		// 
		async onLoad(options){
				// 根据地址的ID读取客户地址 进行编辑使用
				await addressinfo({
					id:options.id
				}).then(res=>{
					console.log("1111",res)
					this.info.consignee=res.data.data.consignee
					this.info.mobile=res.data.data.mobile
					this.planLocate=res.data.data.province + res.data.data.city + res.data.data.district
					this.info.address=res.data.data.address
					this.info.city=res.data.data.city
					this.info.district=res.data.data.district
					this.info.province=res.data.data.province
					this.info.id=res.data.data.id
					if(!res.data.data.mobile){
						this.planLocate="请选择地址"
					}
				})
		},
		methods: {
			//更改三级地址 =确认时运行 有code和name 
			change(result) { 
				// console.log(JSON.stringify(result.data)); 
				// 将选择的结果给值
				this.info.provinceId =result.data[0].id
				this.info.province = result.data[0].name
				this.info.cityId = result.data[1].id
				this.info.city = result.data[1].name
				this.info.districtId =  result.data[2].id
				this.info.district =  result.data[2].name
				console.log("info",this.info)
				// 将最后的省市区给到planlocate,显示到前端
				this.planLocate = ''; 
				result.data.forEach( (item,index) =>{ 
					if(index===0){ 
						this.planLocate += item.name 
					}else{ 
						this.planLocate += '-' +item.name 
					} 
				}) ; 
				let arr =this.planLocate.split('-'); 
				this.address = arr[0] + "-"+ arr[1]+"-"+arr[2];				
				
				},
			switch1Change(e){//设置默认地址
				this.info.isDefault = !this.info.isDefault;
			},
		
			addresssave(){ //点保存运行
				// 检查手机号是否正确
				let myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
				if (!myreg.test(this.info.mobile)) {
					return uni.showToast({
						title: '手机号格式不正确',
						icon: 'none',
						mask: true
					})
				}
				console.log(this.info);
				uni.showLoading({
					title:'保存中',
					mask:true
				})
				this.info.isDefault?this.info.isDefault = 1:this.info.isDefault = 0;
				addresssubmit(this.info).then(res=>{
					uni.showToast({
						title:'保存成功',
						mask:true
					})
					uni.navigateBack({
						delta:1
					})
				})
			},
		}
	}
</script>

<style scoped lang="scss">
.main{
	// background: linear-gradient(#d4d8dd,#e2e9f3);
	height: 100vh;
	overflow-y: scroll;
}
.box3{
	padding: 20rpx 20rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 28rpx;
}
.box2{
	margin: 20rpx 0 0;
	background: #fff;
	padding: 30rpx;
	.title{
		font-size: 28rpx;
	}
	.sfz_box{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
		image{
			width: 48%;
		}
	}
}
.box{
	margin: 20rpx 0 0;
	background: #fff;
	position: relative;
	.paizhao{
		position: absolute;
		bottom: 20rpx;
		right: 20rpx;
		display: flex;
		align-items: center;
		font-size: 26rpx;
		image{
			width: 30rpx;
			margin: 0 10rpx 0 0;
		}
	}
	.input_box2{
		align-items: flex-start !important;
	}
	.input_box{
		font-size: 28rpx;
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #F6F6F6;
		padding: 30rpx 30rpx;
		.label{
			width: 160rpx;
			text-align: left;
		}
		.input{
			font-size: 28rpx;
			width: calc(100% - 160rpx);
			position: relative;
			.textarea2{
				font-size: 28rpx;
				height: 100rpx;
				width: 100%;
			}
			.dingwei{
				position: absolute;
				top: 0rpx;
				right: 20rpx;
				display: flex;
				align-items: center;
				font-size: 26rpx;
				image{
					width: 28rpx;
					margin: 0 10rpx 0 0;
				}
			}
			.getcode{
				color: #adadad;
				right: 0;
				position: absolute;
				top: 2rpx;
			}
			.right_icon{
				position: absolute;
				right: 0rpx;
				width: 10rpx;
				top: 13rpx;
			}
		}
	}
	.textarea{
		padding: 30rpx;
		font-size: 28rpx;
		width: calc(100% - 60rpx);
		height: 200rpx;
	}
}
.shuoming{
	color: #adadad;
	font-size: 28rpx;
	padding: 20rpx 30rpx;
}
input{
	font-size: 28rpx;
}
</style>
